<template>
    <div>
        <el-container>
            <el-main>
                <el-carousel :interval="4000" height="500px" type="card">
                    <el-carousel-item :key="index" v-for="(item,index) in carouselData">
                        <el-image :src="item.image"
                                  fit="scale-down"></el-image>
                    </el-carousel-item>
                </el-carousel>
            </el-main>
        </el-container>


        <!-- tab + tab-->
        <el-container>
            <el-aside style="width: 56%">
                <el-tabs @tab-click="tabHandleClick" value="0">
                    <el-tab-pane :key="index" :label="item.label" v-for="(item,index) in leftTabData">
                        <div :key="index" class="block" v-for="(content,index) in item.content">
                            <el-image :src="content.image" fit="scale-down"
                                      style="height: 200px"></el-image>
                            <span>{{content.title}}</span>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </el-aside>
            <el-main>
                <el-tabs style="height: 269px;" tab-position="left">
                    <el-tab-pane :key="index" :label="item.label" v-for="(item,index) in rightTabData">
                        <div :key="index" v-for="(content,index) in item.content">
                            <span>{{content.text}}</span>
                            <el-divider></el-divider>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </el-main>
        </el-container>

        <!-- 时间轴内容-->
        <el-container>
            <el-main>
                <el-timeline>
                    <el-timeline-item :key="index"
                                      :timestamp="item.time"
                                      placement="top"
                                      type="primary"
                                      v-for="(item,index) in timelineData">
                        <el-card>
                            <h4>{{item.title}}</h4>
                            <p>{{item.content}}</p>
                        </el-card>
                    </el-timeline-item>
                </el-timeline>
            </el-main>
        </el-container>
    </div>


</template>

<script>
    export default {
        name: "Index",
        data() {
            return {
                rightTabData: [
                    {
                        label: '你的内容',
                        content: [
                            {text: '青春是一个短暂的美梦, 当你醒来时, 它早已消失无踪'},
                            {text: '少量的邪恶足以抵消全部高贵的品质, 害得人声名狼藉'}
                        ]
                    },
                    {
                        label: 'wwwwww',
                        content: [
                            {text: '少量的邪恶足以抵消全部高贵的品质, 害得人声名狼藉'}
                        ]
                    },
                ],
                leftTabData: [
                    {
                        label: '你的内容',
                        content: [
                            {
                                title: '我是标题1',
                                image: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
                            },
                            {
                                title: '我是标题2',
                                image: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
                            },
                            {
                                title: '我是标题3',
                                image: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
                            }
                        ]
                    },
                    {
                        label: '我的内容',
                        content: [
                            {
                                title: 'sda',
                                image: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
                            },
                            {
                                title: '123we',
                                image: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
                            }
                        ]
                    }
                ],
                timelineData: [
                    {time: '2009/4/12', title: '更新 Github 模板', content: '王小虎 提交于 2018/4/12 20:46'},
                    {time: '2010/5/12', title: '更新 Github 模板', content: '王小虎 提交于 2018/4/12 20:46'},
                    {time: '2020/06/27', title: '剑网3家具查询上线', content: '提交了第一个版本v1.0'}
                ],
                carouselData: [
                    {title: '1', image: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'},
                    {title: '2', image: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'},
                    {title: '3', image: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'}
                ]
            }
        },
        methods: {
            tabHandleClick(tab, event) {
                console.log(tab, event);
            }
        }
    }
</script>

<style scoped>
    .medium {
        color: white;
        position: absolute;
    }

    .block {
        padding: 10px;
        width: 33.3333%;
        display: inline-block;
        border-right: 1px solid #eff2f6;
        box-sizing: border-box;
        text-align: center;
    }
</style>